import React, { Component } from 'react'
import { Table, Popconfirm } from 'antd';
import { connect } from 'react-redux'
import { DelClass } from '../../api/index'
import { getData } from '../../actions/Tabs'
class Tables extends Component {
  componentDidMount() {
    this.props.reqData()
  }
  handleDelete = async (id) => {
    let res = await DelClass({ _id :id });
    this.props.reqData()
    console.log(res)
  }
  render() {
    let results = this.props.tabs.map(row => ({
      key: row._id,
      name: row.name,
      remake: row.remake,
      time: new Date(row.time * 1000).toLocaleDateString()
    }));
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name'
      },
      {
        title: '备注',
        dataIndex: 'remake'
      },
      {
        title: '创建时间',
        dataIndex: 'time'
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render: (text, record) =>
          <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.key)}>
            <a style={{ color: 'black' }}>删除</a>
          </Popconfirm>
      }
    ];
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
      },
    };
    return (
      <div>
        <Table dataSource={results} rowSelection={rowSelection} columns={columns} pagination={{ pageSize: 5 }} />;
      </div>
    )
  }
}
const map2props = (state) => {
  return {
    tabs: state.tabs
  }
}
const mapDispatch2props = (dispatch) => {
  return {
    reqData() { //使用thunk就手动dispatch出去
      const action = getData();
      dispatch(action)
    }
  }
}
export default connect(map2props, mapDispatch2props)(Tables)

